<template>
	<view class="container">
		<view class="header">
			<view class="user" @tap="goDetails">
				<view class="headPortrait">
					<image src="../../static/icon/tx.jpg" mode=""></image>
				</view>
				<view class="name-level">
					<view class="name">
						<text class="name-value">昵称</text>
					</view>
					<view class="member-id">ID：020399238289</view>
				</view>
				<view class="rightArrow">
					<image src="../../static/icon/shallowArrow.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="menu">
			<view class="menu-inner">
				<view class="grid-item" v-for="(item, index) in grid" :key="index">
					<text class="grid-value">{{item.value}}</text>
					<text class="grid-title">{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main-item" v-for="(item, index) in nav" :key="index">
				<view class="item">
					<image :src="item.icon"></image>
					<text>{{item.title}}</text>
				</view>
				<view class="item-icon">
					<image src="../../static/icon/deepArrow.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				grid: [
					{
						value: 8,
						title: '优惠券'
					},
					{
						value: 3556,
						title: '积分'
					},
					{
						value: 16,
						title: '卡项'
					},
					{
						value: 24,
						title: '收藏'
					}
				],
				nav: [
					{
						icon: '../../static/icon/authentication.png',
						title: '完善信息'
					},
					{
						icon: '../../static/icon/history1.png',
						title: '上传记录'
					},
					{
						icon: '../../static/icon/evaluate.png',
						title: '我的评价'
					},
					{
						icon: '../../static/icon/shoppingMall.png',
						title: '推荐商城'
					},
					{
						icon: '../../static/icon/site.png',
						title: '关于我们'
					},
					{
						icon: '../../static/icon/share.png',
						title: '分享我的'
					},
					{
						icon: '../../static/icon/service.png',
						title: '在线客服'
					}
				]
			}
		},
		components: {
			
		},
		methods: {
			goDetails() {
				uni.navigateTo({
					url: '../member-details/member-details'
				})
			}
		}
	}
</script>

<style scoped>
	.header {
		width: 100%;
		position: relative;
		flex-direction: column;
		align-items: center;
		height: 400rpx;
		overflow: hidden;
		box-sizing: border-box;
	}
	.header .user {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		padding: 40rpx;
		box-sizing: border-box;
	}
	.header .user .name-level {
		flex: 1;
		margin-left: 20rpx;
	}
	.header .user .name-level .name .name-value {
		font-size: 40rpx;
		margin-right: 8rpx;
	}
	.header .user .name-level .name .member-id {
		margin-top: 20rpx;
		font-size: 28rpx;
	}
	.header::after {
		content: '';
		width: 140%;
		height: 320rpx;
		position: absolute;
		top: 0;
		left: -20%;
		border-radius: 0 0 50% 50%;
		background: linear-gradient(1deg, rgb(4, 129, 121) 0%, rgba(51, 166, 158, 1) 100%);
		z-index: -1;
	}
	.headPortrait image {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
	}
	.rightArrow image {
		width: 45rpx;
		height: 45rpx;
	}
	
	.menu {
		position: absolute;
		top: 200rpx;
		width: 100%;
		height: 160rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}
	.menu-inner {
		width: 100%;
		height: 160rpx;
		border-radius: 20rpx;
		background: #fff;
		border: 1rpx solid #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 40rpx;
	}
	.grid-item .grid-value {
		font-size: 32rpx;
		font-weight: 1000;
	}
	.grid-item .grid-title {
		margin-top: 16rpx;
		font-size: 32rpx;
		color: #8f8f8f;
	}
	
	.main-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 60rpx 30rpx;
		border-bottom: 1rpx solid #fafafa;
	}
    .item text {
		position: absolute;
		margin-left: 20rpx;
		margin-top: 6rpx;
		align-items: center;
		color: #8f8f8f;
	}
	.item image {
		width: 50rpx;
		height: 50rpx;
	}
	
	.item-icon image {
		width: 45rpx;
		height: 45rpx;
	}
</style>
